import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { App, Button, Form, Input, Radio } from 'antd';

import Dialog from '@/components/Dialog';
import useDevice, { DEVICES } from '@/hooks/useDevice';
import { setStore } from '@/reducers/common';
import { reportMerch } from '@/service/api';
import styles from './index.module.scss';

export default props => {
    const initState = () => ({ loading: false });
    const [state, setState] = useState(initState);
    const { reportVisible=false, reportTarget={}, userInfo={} } = useSelector(s => s.common);
    const dispatch = useDispatch();
    const deviceType = useDevice();
    const isPc = deviceType === DEVICES.DESKTOP;
    const [form] = Form.useForm();
    const { message } = App.useApp();

    const handleClose = () => {
        dispatch(setStore({ reportVisible: false }));
        form.resetFields();
        setState(initState);
    };

    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            const payload = {
                id: reportTarget?.id || '',
                type: values.type,
                content: values.content,
                contact: values.contact || '',
            };

            setState(o => ({ ...o, loading: true }));
            await reportMerch(payload);
            message.success('感谢反馈，我们会尽快处理！');
            handleClose();
        } catch (e) {
            // 验证错误或接口异常均在此捕获
        } finally {
            setState(o => ({ ...o, loading: false }));
        }
    };

    useEffect(() => {
        if (reportVisible) {
            // 打开时重置表单
            form.resetFields();
        }
    }, [reportVisible]);

    return (
        <Dialog
            className={styles['dialog']}
            open={reportVisible}
            onOpenChange={open => !open ? handleClose() : null}
            isPc={true}
            width={isPc ? 560 : '100%'}
            maskClosable={false}
        >
            <div className={styles['container']}>
                <div className={styles['header']}>举报</div>
                <div className={styles['body']}>
                    <Form
                        form={form}
                        layout="vertical"
                        initialValues={{ type: 'wrong', content: '', contact: '' }}
                    >
                        <Form.Item label="举报类型" name="type" rules={[{ required: true, message: '请选择举报类型' }]}> 
                            <Radio.Group>
                                <Radio.Button value="wrong">信息错误</Radio.Button>
                                <Radio.Button value="infringe">侵权</Radio.Button>
                                <Radio.Button value="illegal">违规</Radio.Button>
                                <Radio.Button value="ad">广告</Radio.Button>
                                <Radio.Button value="other">其他</Radio.Button>
                            </Radio.Group>
                        </Form.Item>

                        <Form.Item label="详细描述" name="content" rules={[{ required: true, message: '请填写详细描述' }, { min: 10, message: '至少填写10个字符' }]}> 
                            <Input.TextArea rows={5} maxLength={500} placeholder="请尽可能详细描述问题，便于我们快速核实" />
                        </Form.Item>

                        <Form.Item label="联系方式（选填）" name="contact"> 
                            <Input placeholder="手机/邮箱/微信等" maxLength={100} />
                        </Form.Item>
                    </Form>
                </div>
                <div className={styles['footer']}>
                    <Button onClick={handleClose}>取消</Button>
                    <Button type="primary" loading={state.loading} onClick={handleSubmit} style={{ marginLeft: 12 }}>提交举报</Button>
                </div>
            </div>
        </Dialog>
    )
}
